/*
 * Copyright 2015 Palantir Technologies, Inc. All rights reserved.
 * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
 * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
 * and https://github.com/palantir/blueprint/blob/master/PATENTS
 */

import * as React from 'react';
import '../node_modules/normalize.css/normalize.css';
import '../node_modules/@blueprintjs/core/dist/blueprint.css';
import { Classes, Dialog, Tooltip, Button, Intent } from "@blueprintjs/core";
import { observer, inject, Provider } from 'mobx-react';
import { observable, runInAction, autorun, extendObservable, extendShallowObservable, isObservable } from 'mobx';

import * as ReactDOM from 'react-dom';

class Data
{
    name: string;
}


@observer
export class TestC extends React.Component<{ data: Data }, {}>{
    render()
    {
        return (
            <button className="btn tbtn sep">
                {this.props.data.name}
            </button>
        );
    }
}


interface IDialogExampleState
{
    isOpen: boolean;
}

class DialogExample extends React.Component<{}, IDialogExampleState> {
    public state = { isOpen: false };

    public render()
    {
        return (
            <div>
                <Button onClick={this.toggleDialog} text="Show dialog" />
                <Dialog
                    iconName="inbox"
                    isOpen={this.state.isOpen}
                    onClose={this.toggleDialog}
                    title="Dialog header"
                >
                    <div className="pt-dialog-body">
                        Some content
                    </div>
                    <div className="pt-dialog-footer">
                        <div className="pt-dialog-footer-actions">
                            <Button text="Secondary" />
                            <Button
                                intent={Intent.PRIMARY}
                                onClick={this.toggleDialog}
                                text="Primary"
                            />
                        </div>
                    </div>
                </Dialog>
            </div>
        );
    }

    private toggleDialog = () => this.setState({ isOpen: !this.state.isOpen });
}


window.onload = () =>
{
    let el = window.document.createElement("div")
    el.innerHTML = "hello cx";
    window.document.body.appendChild(el);

    let root = document.createElement("div")
    root.id = "root"
    document.body.appendChild(root);

    let d = new Data();
    d.name = "hello";

    function getObject(obj, nameList: Array<string>)
    {
        let r = {};
        for (let s of nameList)
        {
            r[s] = obj[s];
        }
        return r;
    }
    extendObservable(d, getObject(d, ["name"]));
    console.log(isObservable(d));
    window["d"] = d;
    ReactDOM.render(
        <div>
            <TestC data={d}></TestC>
            <Button
                onClick={() =>
                {
                    console.log("hello ");
                }}
                className=".pt-small"
            >
                ces
                </Button>
            <DialogExample></DialogExample>
            <button type="button" className={".pt-small"}>Button</button>
        </div >,
        root
    );
}
